<template>
  <view class="entire">
    <wht-tabs
      v-model="pageData.tab1"
      :list="pageData.tabList1"
      @change="handleTab1"
      :isTriangle="true"
    ></wht-tabs>
    <view class="tab2">
      <view v-for="(item, index) in pageData.tabList2" @click="handleTab2(index)" :key="index">
        <view class="checkbox-ntv" :class="checked[index]">{{ item.englishDeptName }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { getParentDepartment, getSecondDepartment } from '@/service/menu/menu'
import { initFlag, tabC1, tabC2 } from '@/components/GzIndexNavBox/courseTabControl'

const pageData = reactive({
  tab1: 0,
  tabList1: [],
  tab2: [],
  tabList2: [],
  parentDeptData: [],
})
const checked = ref([])

// 获取 tab1 的父菜单项
const fetchParentMenu = async () => {
  try {
    const response = await getParentDepartment()
    pageData.tabList1 = response.data.map((dept) => dept.englishDeptName)
    pageData.parentDeptData = response.data
  } catch (error) {
    console.error('Error fetching parent menu:', error)
  }
}

// 根据选定的 tab1 项为 tab2 获取第二级菜单项
const fetchSecondMenu = async (parentDeptId) => {
  try {
    const response = await getSecondDepartment(parentDeptId)
    pageData.tabList2 = response.data
    checked.value = new Array(response.data.length).fill('')
  } catch (error) {
    console.error('Error fetching second menu:', error)
  }
}

// Handle tab1 change
const handleTab1 = async (index) => {
  const selectedDept = pageData.tabList1[index]
  const parentDept = await getParentDepartment()
  const selectedDeptId = parentDept.data.find(
    (dept) => dept.englishDeptName === selectedDept,
  ).deptId
  await fetchSecondMenu(selectedDeptId)
  pageData.tab2 = []
  sendToParent()
}

// Handle tab2 selection
const handleTab2 = (index) => {
  if (checked.value[index] === '') {
    checked.value[index] = 'checkbox-ptv'
    pageData.tab2.push(pageData.tabList2[index])
  } else {
    checked.value[index] = ''
    pageData.tab2 = pageData.tab2.filter((item) => item !== pageData.tabList2[index])
  }
  sendToParent()
}

// Emit event to parent component
const emit = defineEmits(['tab'])
const sendToParent = () => {
  emit('tab', {
    tab1: pageData.parentDeptData[pageData.tab1],
    tab2: pageData.tab2,
  })
}

// Fetch parent menu items on component mount
onMounted(async () => {})

// 从主页跳转过来切换tab的处理
const jump = async (tab1, tab2) => {
  await fetchParentMenu()
  let i = 0
  let j = 0
  for (i in pageData.tabList1) {
    if (pageData.tabList1[i] == tab1) {
      pageData.tab1 = parseInt(i)
      break
    }
  }
  await handleTab1(parseInt(i))
  let flag = 0 // 标识是否出现过
  for (j in pageData.tabList2) {
    if (pageData.tabList2[j].englishDeptName == tab2) {
      pageData.tab2 = parseInt(j)
      flag = 1
      break
    }
  }
  if (flag === 1) handleTab2(parseInt(j))
}

defineExpose({
  jump,
})

onShow(async () => {
  if (initFlag.value === 1) {
    await jump(tabC1.value, tabC2.value)
    initFlag.value = 0
  } else {
    await fetchParentMenu()
    await handleTab1(0) // Load second-level menu for the first parent menu item by default
  }
})
</script>

<style scoped lang="scss">
.entire {
  background-color: #254872;
  .tab2 {
    width: 750rpx;
    height: 100rpx;
    display: flex;
    overflow: scroll;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-color: rgb(135, 181, 222);
    background-color: #e5effd;
    align-items: center;
    .checkbox-ntv {
      margin-left: 7rpx;
      width: 140rpx;
      height: 40rpx;
      font-size: 23rpx;
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 20rpx;
      border-style: solid;
      border-width: 1px;
      border-color: #103f86;
    }
    .checkbox-ptv {
      background-color: #103f86;
      color: white;
    }
  }
}
</style>
